<template>
	<view class="container">
		<view class="swiper">
			<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
				<swiper-item>
					<view class="swiper-item"><image src="/static/images/home/01banner1.jpg" ></image></view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item"><image src="/static/images/home/01banner2.jpg" ></image></view>
				</swiper-item>
			</swiper>
		</view>
		<view class="block2">
			<view>
			  <image src="/static/images/home/02remai.png"></image>
			  <view>热卖</view>
			</view>
			<view>
			  <image src="/static/images/home/02beixin.png"></image>
			  <view>被芯</view>
			</view>
			<view>
			  <image src="/static/images/home/02zhentou.png"></image>
			  <view>枕头</view>
			</view>
			<view>
			  <image src="/static/images/home/02taojian.png"></image>
			  <view>套件</view>
			</view>
		</view>
		<view class="block3">
			<view class="top">
				<view class="line"></view>
				<view class="title">新品上市</view>
			</view>
			<view class="down">
				<view class="swiper">
					<swiper class="swiper" :indicator-dots="indicatorDots1" :autoplay="autoplay1" :interval="interval1" :duration="duration1">
						<swiper-item>
							<view class="swiper-item"><image src="/static/images/home/03banner1.jpg" ></image></view>
						</swiper-item>
						<swiper-item>
							<view class="swiper-item"><image src="/static/images/home/03banner2.jpg" ></image></view>
						</swiper-item>
					</swiper>
				</view>
			</view>
		</view>
		<view class="block4">
			<image src="/static/images/home/04banner.jpg"></image>
		</view>
		<view class="block5">
			<image src="/static/images/home/04left.jpg" mode=""></image>
			<image src="/static/images/home/04right.jpg" mode=""></image>
		</view>
		<view class="block6 block3">
			<view class="top">
				<view class="line"></view>
				<view class="title">热销产品</view>
			</view>
			<view class="down1">
				<image src="/static/images/home/05-1.jpg" mode=""></image>
				<image src="/static/images/home/05-2.jpg" mode=""></image>
				<image src="/static/images/home/05-3.jpg" mode=""></image>
				<image src="/static/images/home/05-4.jpg" mode=""></image>
			</view>
		</view>
		<guakao></guakao>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				indicatorDots:true,
				autoplay:true,
				interval:3000,
				duration:500,
				indicatorDots1:true,
				autoplay1:false,
				interval1:2000,
				duration1:800,
				
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
	/* swiper */
	swiper,
	swiper-item,
	image{
		width: 100%;
		height: 200px;
	}
	/* block2 */
	.block2{
		background: #fff;
		margin-top: 10px;
		margin-bottom: 10px;
		display: flex;
		justify-content: space-around;
		padding-top: 10px;
		padding-bottom: 10px;
	}
	.block2>view{
		width: 16%;
	}
	.block2>view image{
		width: 100%;
		height: 50px;
	}
	.block2>view view{
		font-size: 14px;
		color: #333;
		text-align: center;
	}
	/* block3 */
	.block3{
		background: #fff;
		margin-bottom: 10px;
	}
	.block3 .top{
		height: 50px;
		position: relative;
	}
	.block3 .top .line{
		width: 30%;
		height: 2px;
		background: #ddd;
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		margin: auto;
	}
	.block3 .top .title{
		width: 24%;
		background: #fff;
		position: absolute;
		left: 0;top: 0;right: 0;bottom: 0;
		margin:auto;
		text-align: center;
		font-size: 14px;
		line-height: 50px;
	}
	
	/* block4 */
	.block4{
		background: #fff;
		margin-bottom: 10px;
	}
	.block4 image{
		width: 100%;
		display: block;
	}
	
	/* block5 */
	.block5{
		background: #fff;
		margin-bottom: 10px;
		padding-top: 15px;
		padding-bottom: 15px;
		display: flex;
		justify-content: space-around;
		padding-left: 10px;
		padding-right: 10px;
	}
	.block5 image{
		width: 46%;
		height: 230px;
		border-radius: 2px;
	}
	
	/* block6 */
	.down1{
		border-top: 1px solid #ccc;
		padding: 20px 10px;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.down1 image{
		width: 48%;
		height: 125px;
		margin-bottom: 10px;
		border-radius: 4px;
	}
</style>
